<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
		<br />
		
		<li>444</li>
		<br />
		
		<button id="btn">添加新的li</button>
		<button id="btn2">移除事件委托</button>
		
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script>
			// 1. 点击li背景变为红色
			$("ul").delegate("li", "click", function(){
				console.log(this)
				this.style.background = 'red'
			})
			
			$("#btn").click(function(){
				$("ul").append("<li>新增的li...</li>")
			})
			
			$("#btn2").click(function(){
				$("ul").undelegate()
			})
		</script>
	</body>
</html>
